<template>
  <div>
    <p ref="a">数字: {{ count }}</p>
    <button @click="btn">点击+1, 观察打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    btn() {
      // 结论：数据驱动视图时，变量值的修改是同步的，DOM的更新是异步的。因为js是单线程，DOM渲染消耗大量性能，容易造成阻塞
      this.count++; // 数字添加后(值的更新是同步的), 异步更新DOM, 所以马上获取标签的值还是0
      console.log(this.count, "上次的DOM", this.$refs.a.innerHTML); // 0
      // 等到DOM更新完毕，执行回调
      this.$nextTick(() => {
        console.log("DOM更新后触发$nextTick函数");
        console.log("新的DOM", this.$refs.a.innerHTML); // 1
      });
    },
  },
};
</script>